import React from "preact/compat";
import {useState} from "react";
import {Question} from "./question.tsx";
import {Answer} from "./answer.tsx";

type ExamProps = {
    id: number,
    question: string,
    answer: string,
    memos:string,
}

const Exam: React.FC<ExamProps> = (prop) => {
    const [show, setShow] = useState(false)
    return (<>
        <Question id={prop.id} question={prop.question}/>
        {show ? <>
            <Answer answer={prop.answer} tag="答案"/>
            <Answer answer={prop.memos ?? '无'} tag="解析"/>
        </> : <div
            style={{display: 'flex', position: 'fixed', bottom: '20%', left: 0, right: 0, justifyContent: 'center'}}>
            <button style={{width: '100px', height: '100px'}} onClick={() => setShow(true)}>显示答案</button>
        </div>}
    </>)
}
export {Exam};
export type {ExamProps};
